<template>
  <div class="main">
    <div class="left">
      <el-tree
        ref="MyTree"
        :data="classify"
        :props="defaultProps"
        accordion
        node-key="id"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <img
            v-if="
              data.cate == 1 && data.routerList.includes(selectName) == true
            "
            :src="data.selectImg"
            alt=""
          />
          <img
            v-if="
              data.cate == 1 && data.routerList.includes(selectName) == false
            "
            :src="data.normalImg"
            alt=""
          />
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <div class="right">
      <transition name="el-fade-in" mode="out-in">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
      </transition>
      <transition name="el-fade-in" mode="out-in">
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
import selectImg1 from "@img/project/icon-left01-select.png";
import normalImg1 from "@img/project/icon-left01-normal.png";
import selectImg2 from "@img/project/icon-left02-select.png";
import normalImg2 from "@img/project/icon-left02-normal.png";
import selectImg3 from "@img/project/icon-left03-select.png";
import normalImg3 from "@img/project/icon-left03-normal.png";
import selectImg4 from "@img/project/icon-left04-select.png";
import normalImg4 from "@img/project/icon-left04-normal.png";
import selectImg5 from "@img/project/icon-left05-select.png";
import normalImg5 from "@img/project/icon-left05-normal.png";
export default {
  data() {
    return {
      classify: [],
      activeName: "",
      selectName: "",
      routerList: [
        {
          id: 0,
          label: "项目总览",
          routerName: "overview",
          activeName: "overview",
        },
        {
          id: 1,
          label: "我的项目",
          routerName: "myproject",
          activeName: "myproject",
        },
        {
          id: 2,
          label: "台账管理",
          routerName: "book",
          activeName: "book",
        },
        {
          id: 3,
          label: "统计分析",
          routerName: "statistics",
          activeName: "statistics",
        },
        {
          id: 4,
          label: "绩效管理",
          routerName: "achievements",
          activeName: "achievements",
        },
        {
          id: 5,
          label: "信息台账",
          routerName: "infoaccountbook",
          activeName: "infoaccountbook",
        },
        {
          id: 6,
          label: "项目台账",
          routerName: "projectaccountbook",
          activeName: "projectaccountbook",
        },
        {
          id: 7,
          label: "绩效排名",
          routerName: "ranking",
          activeName: "ranking",
        },
        {
          id: 8,
          label: "绩效评分",
          routerName: "score",
          activeName: "score",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    "$route.name": function(newVal, oldVal) {
      this.activeName = newVal;
      this.selectName = newVal;
      this.routerList.map((item) => {
        if (item.routerName == newVal) {
          this.$bus.$emit("setActive", "projectgl");
          this.$refs.MyTree.setCurrentKey(item.id);
          this.$refs.MyTree.setCurrentKey(item.id);
          console.log(item.id);
          if (item.id == 2) {
            this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
              if (ele.data.id == 2) {
                ele.expanded = true;
              }
            });
          } else if (item.id == 5 || item.id == 6) {
            this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
              if (ele.data.id == 2) {
                ele.expanded = true;
              }
            });
          } else if (item.id == 4) {
            this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
              if (ele.data.id == 4) {
                ele.expanded = true;
              }
            });
          } else if (item.id == 7 || item.id == 8) {
            this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
              if (ele.data.id == 4) {
                ele.expanded = true;
              }
            });
          } else {
            this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
              if (ele.data.id == item.id) {
                ele.expanded = true;
              } else {
                ele.expanded = false;
              }
            });
          }
        }
      });
    },
  },
  mounted() {
    this.$bus.$emit("setActive", "projectgl");
    let pageList = localStorage.getItem("pageList").split(",");
    if (pageList.includes("9") == true) {
      this.classify.push({
        id: 0,
        cate: 1,
        label: "项目总览",
        routerName: "overview",
        activeName: "overview",
        routerList: ["overview"],
        selectImg: selectImg1,
        normalImg: normalImg1,
      });
    }
    if (pageList.includes("10") == true) {
      this.classify.push({
        id: 1,
        cate: 1,
        label: "我的项目",
        routerName: "myproject",
        activeName: "myproject",
        routerList: ["myproject"],
        selectImg: selectImg2,
        normalImg: normalImg2,
      });
    }
    if (pageList.includes("11") == true && pageList.includes("12") == true) {
      this.classify.push({
        id: 2,
        cate: 1,
        label: "台账管理",
        routerName: "",
        activeName: "book",
        routerList: ["infoaccountbook", "projectaccountbook", "book"],
        selectImg: selectImg3,
        normalImg: normalImg3,
        children: [
          {
            id: 5,
            cate: 2,
            label: "信息台账",
            routerName: "infoaccountbook",
            activeName: "infoaccountbook",
          },
          {
            id: 6,
            cate: 2,
            label: "项目台账",
            routerName: "projectaccountbook",
            activeName: "projectaccountbook",
          },
        ],
      });
    } else if (pageList.includes("11") == true) {
      this.classify.push({
        id: 2,
        cate: 1,
        label: "台账管理",
        routerName: "",
        activeName: "book",
        routerList: ["infoaccountbook", "projectaccountbook", "book"],
        selectImg: selectImg3,
        normalImg: normalImg3,
        children: [
          {
            id: 5,
            cate: 2,
            label: "信息台账",
            routerName: "infoaccountbook",
            activeName: "infoaccountbook",
          },
        ],
      });
    } else if (pageList.includes("12") == true) {
      this.classify.push({
        id: 2,
        cate: 1,
        label: "台账管理",
        routerName: "",
        activeName: "book",
        routerList: ["infoaccountbook", "projectaccountbook", "book"],
        selectImg: selectImg3,
        normalImg: normalImg3,
        children: [
          {
            id: 6,
            cate: 2,
            label: "项目台账",
            routerName: "projectaccountbook",
            activeName: "projectaccountbook",
          },
        ],
      });
    }
    if (pageList.includes("13") == true) {
      this.classify.push({
        id: 3,
        cate: 1,
        label: "统计分析",
        routerName: "statistics",
        activeName: "statistics",
        routerList: ["statistics"],
        selectImg: selectImg4,
        normalImg: normalImg4,
      });
    }
    if (pageList.includes("14") == true && pageList.includes("15") == true) {
      this.classify.push({
        id: 4,
        cate: 1,
        label: "绩效管理",
        routerName: "",
        activeName: "achievements",
        routerList: ["ranking", "score", "achievements"],
        selectImg: selectImg5,
        normalImg: normalImg5,
        children: [
          {
            id: 7,
            cate: 2,
            label: "绩效排名",
            routerName: "ranking",
            activeName: "ranking",
          },
          {
            id: 8,
            cate: 2,
            label: "绩效评分",
            routerName: "score",
            activeName: "score",
          },
        ],
      });
    } else if (pageList.includes("14") == true) {
      this.classify.push({
        id: 4,
        cate: 1,
        label: "绩效管理",
        routerName: "",
        activeName: "achievements",
        routerList: ["ranking", "score", "achievements"],
        selectImg: selectImg5,
        normalImg: normalImg5,
        children: [
          {
            id: 7,
            cate: 2,
            label: "绩效排名",
            routerName: "ranking",
            activeName: "ranking",
          },
        ],
      });
    } else if (pageList.includes("15") == true) {
      this.classify.push({
        id: 4,
        cate: 1,
        label: "绩效管理",
        routerName: "",
        activeName: "achievements",
        routerList: ["ranking", "score", "achievements"],
        selectImg: selectImg5,
        normalImg: normalImg5,
        children: [
          {
            id: 8,
            cate: 2,
            label: "绩效评分",
            routerName: "score",
            activeName: "score",
          },
        ],
      });
    }
    if (this.$route.name != "projectgl") {
      this.selectName = this.$route.name;
      this.routerList.map((item) => {
        if (item.routerName == this.$route.name) {
          this.$nextTick(() => {
            if (item.id == 5 || item.id == 6) {
              this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
                if (ele.data.id == 2) {
                  ele.expanded = true;
                }
              });
            } else if (item.id == 7 || item.id == 8) {
              this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
                if (ele.data.id == 4) {
                  ele.expanded = true;
                }
              });
            }
            this.$refs.MyTree.setCurrentKey(item.id);
          });
        }
      });
    } else {
      this.$nextTick(() => {
        this.$router.push({ name: this.classify[0].routerName });
        this.selectName = this.classify[0].activeName;
        this.$refs.MyTree.setCurrentKey(this.classify[0].id);
      });
    }
  },

  methods: {
    handleNodeClick(data) {
      if (data.id == 2) {
        this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
          if (ele.data.id == 2) {
            ele.expanded = true;
          }
        });
        // this.$refs.MyTree.store.root.childNodes[2].expanded = true;
        this.activeName = data.children[0].routerName;
        this.selectName = data.children[0].activeName;
        this.$router.push(data.children[0].routerName);
        this.$refs.MyTree.setCurrentKey(data.children[0].id);
      } else if (data.id == 5 || data.id == 6) {
        // this.$refs.MyTree.store.root.childNodes[2].expanded = true;
        this.activeName = data.routerName;
        this.selectName = data.activeName;
        this.$router.push(data.routerName);
        this.$refs.MyTree.setCurrentKey(data.id);
      } else if (data.id == 4) {
        // this.$refs.MyTree.store.root.childNodes[4].expanded = true;
        this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
          if (ele.data.id == 4) {
            ele.expanded = true;
          }
        });
        this.activeName = data.children[0].routerName;
        this.selectName = data.children[0].activeName;
        this.$router.push(data.children[0].routerName);
        this.$refs.MyTree.setCurrentKey(data.children[0].id);
      } else if (data.id == 7 || data.id == 8) {
        // this.$refs.MyTree.store.root.childNodes[2].expanded = true;
        this.activeName = data.routerName;
        this.selectName = data.activeName;
        this.$router.push(data.routerName);
        this.$refs.MyTree.setCurrentKey(data.id);
      } else {
        if (data.routerName == "myproject") {
          localStorage.setItem("activeStatus", 1);
        }

        this.$refs.MyTree.store.root.childNodes.map((ele, index) => {
          if (ele.data.id == 2) {
            ele.expanded = false;
          }
          if (ele.data.id == 4) {
            ele.expanded = false;
          }
        });
        this.activeName = data.routerName;
        this.selectName = data.activeName;
        this.$router.push(data.routerName);
        this.$refs.MyTree.setCurrentKey(data.id);
      }
      console.log(this.selectName);
    },
  },
};
</script>

<style lang="less" scoped>
.project-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main {
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
  display: flex;
}
.left {
  flex: 0 0 300px;
  height: 100%;
  margin-right: 30px;
}
.right {
  flex: 1;
  background: #fafafa;
  display: flex;
}
.el-tree {
  height: 100%;
  background: #ffffff;
  font-family: Microsoft YaHei;
  font-size: 16px;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
  color: #666;
}
/deep/ .el-tree-node {
  cursor: pointer;
}
/deep/ .el-tree-node__content {
  height: 60px;
  line-height: 60px;

  .el-tree-node__label {
    font-weight: 400;
    font-size: 20px;
    color: #333;
  }
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    height: 50px;
    line-height: 50px;
    background: #f7faff;
    .el-tree-node__label {
      font-size: 16px;
    }
  }
}
/deep/.el-tree-node__children {
  .el-tree-node__label {
    font-weight: 400;
    color: #666;
  }
}
/deep/ .el-tree-node__content {
  padding: 0 30px !important;
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    padding: 0 30px 0 80px !important;
  }
}
/deep/.is-expanded {
  .el-tree-node__content {
    position: relative;
    .el-tree-node__label {
      font-weight: bold;
      font-size: 20px;
      color: #446db3;
    }
  }
  .el-tree-node__children {
    background: #f7faff;

    .el-tree-node__label {
      font-weight: 400;
      font-size: 16px;
      color: #666;
    }
  }
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background: #e9f3ff;
  border-right: 4px solid #446db3;
}
/deep/.el-tree > .el-tree-node:hover > .el-tree-node__content {
  background: #e9f3ff;
}
// /deep/.el-tree > .el-tree-node:focus > .el-tree-node__content {
//   background: #fff;
// }

/deep/.is-current > .el-tree-node__content > .el-tree-node__label {
  font-weight: bold;
  color: #446db3 !important;
}
/deep/ .el-tree-node__children .is-current > .el-tree-node__content {
  color: #446db3;
  background: #e9f3ff;
  border-right: 4px solid #446db3;
}
/deep/ .el-tree-node__expand-icon {
  position: absolute;
  cursor: default;
  right: 10px;
}

/deep/.el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/resources/icon-page-right.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
/deep/ .el-tree-node__content {
  cursor: pointer;
}
/deep/.is-current .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    display: block;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 10px;
    height: 10px;
    background: url("~@img/resources/sidenav-hover2.png") no-repeat center;
  }
  .el-tree-node__expand-icon.is-leaf:before {
    background-image: unset;
  }
}
// /deep/ .el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("") no-repeat center
//     center;
// }
// /deep/.is-current > div > span.el-icon-caret-right:before {
//   display: block;
//   width: 10px;
//   height: 10px;
//   content: "";
//   background: url("~@img/resources/sidenav-hover2.png") no-repeat center
//     center;
// }
// // 右侧图标 位置  不重复
/deep/.el-tree
  > .el-tree-node
  > .el-tree-node__content
  > .el-tree-node__label::before {
  width: 26px;
  height: 26px;
  display: inline-block;
  content: "";
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -4px;
}

/deep/.el-tree
  > .el-tree-node:nth-child(1)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left01-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(1).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left01-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left02-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(2).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left02-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left03-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left03-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(3).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left03-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left04-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left04-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(4).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left04-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(5)
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left05-normal.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(5).is-expanded
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left05-select.png") no-repeat center;
}
/deep/.el-tree
  > .el-tree-node:nth-child(5).is-current
  > .el-tree-node__content
  > .el-tree-node__label::before {
  background: url("~@img/project/icon-left05-select.png") no-repeat center;
}
.m-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node__content
  .custom-tree-node
  span {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666;
}
/deep/
  .el-tree-node
  .el-tree-node__children
  .el-tree-node.is-current
  .el-tree-node__content
  .custom-tree-node
  span {
  font-weight: bold;
  color: #446db3;
}
/deep/ .el-tree-node > .el-tree-node__content .custom-tree-node {
  font-weight: 400;
  font-size: 20px;
  color: #333;
}
/deep/ .el-tree-node.is-expanded > .el-tree-node__content {
  background: #e9f3ff;
}
/deep/ .el-tree-node.is-expanded > .el-tree-node__content .custom-tree-node {
  font-weight: 700;
  color: #446db3;
}
/deep/ .el-tree-node__content {
  img {
    width: 26px;
    height: 26px;
    margin-right: 10px;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .left {
    flex: 0 0 240px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
}
</style>
